<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="0">
        <el-row type="flex" style="padding: 20px">
          <el-button @click="addpanel=true" style="padding:10px" type="primary" icon="el-icon-plus">添加商品</el-button>


        </el-row>
      </el-col>

      <el-col :span="10" :offset="4">
        <el-row>
          <el-input
              placeholder="请输入商品名称"
              v-model="input"
              style="width: 250px;padding: 20px;"
              clearable>
          </el-input>
          <el-button @click="getItem(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-row>
      </el-col>
    </el-row>

    <el-table
        :data="itemList"
        border
        stripe
        height="480"

        style="width: 90%;left:50px">
      <el-table-column
          prop="id"
          label="商品编号">

      </el-table-column>
      <el-table-column
          prop="name"
          label="商品名称"
          width="280">

      </el-table-column>
      <el-table-column
          prop="imageUrl"
          label="商品图片"
          width="150">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              @click="push(scope.row.imageUrl)"
              :src="scope.row.imageUrl"
              :preview-src-list="srcList"
              :fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="number"
          label="数量"
          width="120">

      </el-table-column>
      <el-table-column
          prop="price"
          width="200"
          label="积分数">

      </el-table-column>


      <el-table-column
          width="150"
          label="操作">
        <template slot-scope="scope">
          <el-row>

            <i class="el-icon-edit" @click="choose(scope.row)"
               style="position:relative;left:10px"></i>
            <i class="el-icon-delete" type="danger"
               @click="deleteItem(scope.row)"
               style="position:relative;left:40px;color:#a83939;">
            </i>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="编辑信息"
        :visible.sync="panel"
        width="30%"
        :before-close="handleClose">
      <span>
        <div class="demo-input-suffix">
          <el-row>
          商品名称：
            <el-input style="width:250px;padding:10px"
                      v-model="name"
                      clearable>
              {{ name }}
            </el-input>
          </el-row>
        </div>

          <div class="demo-input-suffix">
          <el-row>
          商品图片：
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarchange"
                :before-upload="beforeAvatarUpload">
  <img v-if=" imageUrl" :src="imageUrl" class="avatar" alt="">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
          </el-row>
        </div>
       <div>

         <el-row>
        商品数量：
            <el-input style="width:250px;padding:10px"
                      clearable

                      v-model="number">
              {{ number }}
            </el-input>
         </el-row>
        </div>
      <div>
        <el-row>
        兑换积分：
            <el-input style="width:250px;padding:10px"
                      clearable
                      v-model="price">
              {{ price }}
            </el-input>
        </el-row>
  </div>

      </span>

      <span slot="footer" class="dialog-footer">
    <el-button @click="panel = false" type="danger">取 消</el-button>
    <el-button type="primary" @click="editItem()">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="编辑信息"
        :visible.sync="addpanel"
        width="30%"
        :before-close="handleClose">
      <span>
        <div class="demo-input-suffix">
          <el-row>
          商品名：
            <el-input style="width:250px;padding:10px"

                      v-model="newname"
                      clearable>
              {{ newname }}
            </el-input>
          </el-row>
        </div>

          <div class="demo-input-suffix">
          <el-row>
          商品图片：
          <el-avatar shape="square" :size="100" :src="newimageUrl"></el-avatar>
            <input type="file" @change="handleImg()">
          </el-row>
        </div>
       <div>

         <el-row>
          商品数量：
            <el-input style="width:250px;padding:10px"
                      clearable

                      v-model="newnumber">
              {{ newnumber }}
            </el-input>
         </el-row>
        </div>
      <div>
        <el-row>
        兑换积分：
            <el-input style="width:250px;padding:10px"
                      clearable
                      v-model="newprice">
              {{ newprice }}
            </el-input>
        </el-row>
  </div>

      </span>

      <span slot="footer" class="dialog-footer">
    <el-button @click="panel = false" type="danger">取 消</el-button>
    <el-button type="primary" @click="addItem()">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import {addItem, changeItem, deleteItem, getAllItems, getItemByName} from "@/api/api";

export default {
  name: "item",
  data() {
    return {
      panel: false,
      addpanel: false,

      input: '',
      imageUrl: '',
      name: '',
      number: '',
      price: '',
      newimageUrl: '',
      newname: '',
      newnumber: '',
      newprice: '',
      id: '',
      itemList: [],
      srcList: [],
    }
  },
  mounted() {
    this.getAll();
  },
  methods: {
    push(i) {
      this.srcList.push(i);
    },
    pushPicture() {

    },
    getItem(i) {
      getItemByName(i).then((res) => {
        console.log(res.data);
        if (res.data.code === '200') {
          this.itemList = [];
          this.itemList.push(res.data.data)
        }
      }).catch((res) => {
        console.log(res.data.message)
      })
    },
    addItem() {
      let data = new FormData();
      let file = document.querySelector('input[type=file]').files[0];
      data.append('file',file);
      data.append('name',this.newname);
      data.append('number',this.newnumber);
      data.append('price', this.newprice);
      addItem(data).then((res) => {
        alert(res.data.message);
        location.reload();
      }).catch((res) => {
        console.log(res.data.message)
      })
    },
    choose(i) {
      this.panel = true;
      this.imageUrl = i.imageUrl;
      this.price = i.price;
      this.number = i.number;
      this.name = i.name;

    },

    editItem() {
      const param = param.setItem("id", this.id);
      param.setItem("imageUrl", this.imageUrl);
      param.setItem("name", this.name);
      param.setItem("number", this.number);
      param.setItem("price", this.price);
      this.panel = false;
      changeItem(param).then((res) => {
        alert(res.data.message)
      }).catch((res) => {
        alert(res.data.message);
      })

    },
    deleteItem(i) {
      deleteItem(i.id).then((res) => {
        alert(res.data.data);
        location.reload();
      }).catch((res) => {
        alert(res.data.message);
      })

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    getAll() {
      getAllItems().then((res) => {
        if (res.data.code === '200') {
          this.itemList = res.data.data;
        } else {
          console.log(res.data.message)
          console.log(res.data.data);
        }
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })

    },
    handleAvatarSuccess(res, file) {
      this.newimageUrl = URL.createObjectURL(file.raw);
      console.log(this.newimageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarchange(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
    },
    handleImg(){
      let file = document.querySelector('input[type=file]').files[0];
      this.newimageUrl = window.URL.createObjectURL(file);
    }

  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>